<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_state_demo</title>
</head>
<body>
<div>
  <h2>Simple TODO List</h2>
  <input type="text">
  <button>Add #4</button>
  <ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
  </ul>
</div>
<hr>

<div id="example">在此实现页面效果和功能</div>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
<script type="text/babel">
  /*
   功能: 组件化实现此功能
   1. 界面显示如上所示
   2. 输入文本, 点击按钮显示到下面列表的首位, 并清除输入的文本
   */
  /*
   分解组件:
   列表: TodoList
   props: todos
   应用: App
   state: todos, inputTodo
   */
  /*
   问题: 完善功能
   1). 如果没有输入或输入的只是空格, 不添加到列表
   2). 如果输入的文本两边有空格, 去掉空格后添加
   */
  /*
   *  拆分组件：
   *  1、添加 todo的组件  AddTodo
   *  2、显示todo列表： TodoList
   *  3、 应用主组件： App
   *
   * */
  //定义AddTodo组件
  
  // class App extends React.Component {
  //   constructor (props) {
  //     super(props)
  //     this.state = {
  //       todoLists:['吃饭', '睡觉', '打豆豆'],
  //     }
  //     this.add = this.add.bind(this);
  //   }
  //   add(newTodo) {
  //     // alert(newTodo);
  //     let latestTodos = this.state.todoLists;
  //     latestTodos.unshift(newTodo);
  //     this.setState({
  //       latestTodos
  //     })
  //   }
  //   render() {
  //     let {todoLists} = this.state;
  //     return (
  //       <div>
  //         <h2>Simple TODO List</h2>
  //         <AddTodo add={this.add} />
  //         <TodoList todo={todoLists} />
  //       </div>
  //     )
  //   }
  // }

  // class AddTodo extends React.Component {
  //   constructor(props) {
  //     super(props);
  //     this.addTodo = this.addTodo.bind(this);
  //   }
  //   addTodo() {
  //     let newTodo = this.refs.newTodo.value;
  //     this.props.add(newTodo);
  //   }
  //   render() {
  //     return (
  //       <div>
  //         <input ref="newTodo" type="text" />
  //         <button onClick={this.addTodo}>Add #4</button>
  //       </div>
  //     )
  //   }
  // }

  // class TodoList extends React.Component {
  //   render() {
  //     let {todo} = this.props;
  //     return (
  //       <ul>
  //         {
  //           todo.map((item, index) => {
  //             return <li key={index}>{item}</li>
  //           })
  //         }
  //       </ul>
  //     )
  //   }
  // }

  // ReactDOM.render(<App />, document.getElementById("example"));





  class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        todoLists:['sui', 'ta', 'ba'],
      }
      this.add = this.add.bind(this);
    }
    add(newTodo) {
      let data = this.state.todoLists;
      data.unshift(newTodo);
      this.setState({data});
    }
    render() {
      let todoLists = this.state.todoLists;
      return (
        <div>
          <h2>随她吧，随她吧，后来已没有办法</h2>
          <AddTodo add={this.add} len={todoLists.length} />
          <TodoLists todos={todoLists}/>
        </div>
      )
    }
  }

  class AddTodo extends React.Component {
    constructor(props) {
      super(props)
      this.addTodo = this.addTodo.bind(this)
    }
    addTodo() {
      let newTodo = this.refs.newTodo.value;
      this.props.add(newTodo);
    }
    render(){
      return (
        <div>
          <input ref="newTodo" type="text" />
          <button onClick={this.addTodo}>Add #{this.props.len}</button>
        </div>
      )
    }
  }

  class TodoLists extends React.Component {
    render() {
      let {todos} = this.props;
      return (
        <ul>
          {
            todos.map((item, index) => <li key={index}>{item}</li>)
          }
        </ul>
      )
    }
  }


  ReactDOM.render(<App />, document.getElementById('example'));
</script>
</body>
</html>

